<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- vue -->
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>
    <!-- element-ui -->
    <link
      href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css"
      rel="stylesheet"
    />
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script>
    <title>proxy</title>
    <link rel="stylesheet" href="./main.css" />
  </head>

  <body>
    <div id="app">
      <div class="p16 jsb">
        <el-button type="primary" @click="addConfig">新建配置项</el-button>
        <div class="jac">
          <el-upload
            action="/"
            accept=".json"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onImport"
          >
            <el-button>导入</el-button>
          </el-upload>
          <a href="/proxyConfig.json" target="_blank">
            <el-button>导出</el-button>
          </a>
        </div>
      </div>
      <el-tabs
        v-model="activeConfig"
        closable
        @tab-remove="removeTab"
        @tab-click="handleConfigClick"
      >
        <el-tab-pane
          v-for="(item, index) in configList"
          :key="index"
          :label="`${index + 1} ${item.name}`"
          :name="item.value"
        >
        </el-tab-pane>
      </el-tabs>
      <div v-if="configList.length" class="p16">
        <el-button size="mini" type="primary" @click="addProxy">
          新增代理
        </el-button>
        <el-button size="mini" type="primary" @click="onSaveProxy">
          保存
        </el-button>
      </div>
      <el-empty v-if="!proxyList.length" description="暂无配置"></el-empty>
      <el-table v-else :data="proxyList" border>
        <el-table-column type="index" label="序号" width="55"></el-table-column>
        <el-table-column
          prop="title"
          label="代理名称"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="head"
          label="代理头"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="请求日志" width="120px">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.requestLog"
              active-text="开"
              inactive-text="关"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="{ row }">
            <el-radio-group v-model="row.value">
              <div v-for="(e, i) in row.list" :key="i" class="item_url_box">
                <el-radio :label="e.url"> {{ e.name }} {{ e.url }} </el-radio>
              </div>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editProxy(row.id)"
            >
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeProxy(row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-backtop></el-backtop>
      <!-- 弹窗 - 编辑 -->
      <el-dialog
        title="代理设置"
        :visible.sync="dialogVisible"
        width="550px"
        top="5vh"
      >
        <el-form label-width="80px">
          <el-form-item label="代理名称">
            <el-input
              v-model.trim="currentProxy.title"
              placeholder="请输入代理名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="代理头">
            <el-input
              v-model.trim="currentProxy.head"
              placeholder="请输入代理头"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="请求日志">
            <el-switch
              v-model="currentProxy.requestLog"
              active-text="开"
              inactive-text="关"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <el-button v-if="currentProxy.head" type="primary" @click="addUrl">
          添加 {{ currentProxy.head }} 的地址
        </el-button>
        <el-table :data="currentProxy.list">
          <el-table-column prop="name" label="名称">
            <template slot-scope="{ row }">
              <el-input
                v-model.trim="row.name"
                placeholder="请输入名称如: 本地/线上"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="地址">
            <template slot-scope="{ row }">
              <el-input
                v-model.trim="row.url"
                placeholder="请输入url: http://xxx:9501"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="操作" width="50">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeUrl(row.url)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="comfirmProxy"> 确 定 </el-button>
        </span>
      </el-dialog>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
